<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="item,index in images" :key="item.id">
          <img :src="item.imgurl" alt="" width="300" />
          <br />
          <span>{{item.name}}----{{index}}</span>
        </li>
      </ul>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            images: [
              {
                id: "001",
                imgurl: "https://puui.qpic.cn/tv/0/1249321503_540304/0",
                name: "向日葵",
              },
              {
                id: "002",
                imgurl: "https://puui.qpic.cn/tv/0/1249252184_540304/0",
                name: "兔叽",
              },
            ],
          };
        },
      });
    </script>
  </body>
</html>
